<template>
    <div class="weapon-box">
        <tittle-two :color="color">
            <div>{{cl[dlt*3+week].cl_name}}</div>
            <div v-if="week!==0" class="cl-img">
                <div v-for="(cc, i) in mycl" v-if="cc.name.indexOf(cl[dlt*3+week].cl_name)>-1">
                    <img :src="getSrc(i)" alt="">
                </div>
            </div>
        </tittle-two>
        <div class="list">
            <a target="_blank" v-for="(w, i) in wweapon" v-if="week === 0 || w.cl === cl[dlt*3+week].cl" :href="urlt.url+w['url'+ urlt.id]">
                <div class="box">
                    <img :src="require(`@/assets/wq/${w.name}.png`)" alt="">
                    <div>{{w.name}}</div>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
  import TittleTwo from '../temp/TittleTwo.vue'
  import cl from '@/data/cl'
  import * as com from '@/data/com'

  export default {
    name: "WeaponBox",
    components: {
      TittleTwo
    },
    props: {
      color: String,
      cl: Array,
      week: Number,
      dlt: Number,
      wweapon: Array
    },
    data() {
      return {
        mycl: [],
        urlt: {
          id: 'cb',
          url: 'https://genshin.honeyhunterworld.com'
        }
      }
    },
    methods: {
      getSrc(index) {
        return require(`@/assets/cl/${this.mycl[index].name}.png`)
      },
      init() {
        const tstr = this.$route.query.type
        if(tstr && com[tstr]) {
          this.urlt = com[tstr]
        }
      }
    },
    created() {
      this.mycl = cl
      this.init()
      console.log('武器材料信息',cl);
      console.log('--------------------');
    }
  }
</script>

<style lang="less" scoped>
    .weapon-box {
        .cl-img {
            width: 40%;
            max-width: 240px;
            display: flex;
            justify-content: space-evenly;
        }
        .list {
            display: flex;
            flex-wrap: wrap;
            a {
                display: block;
                text-decoration: none;
                color: #000;
                margin-left: 2px;
                width: 16%;
                .box {
                    width: 100%;
                    img {
                        width: 100%;
                        border-radius: 5px;
                        max-width: 50px;
                    }
                    div {
                        width: 100%;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
